<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="calcPage bg-fff">
            <view class="tabs col-3e font16 flex bg-fff bottomShadow">
                <block v-for="item in daiTypeList" :key="item.type">
                    <view class="tab flex" :class="{'active': calcType === item.type}" @click="changeDaiType(item)"><text class="txt">{{item.name}}</text></view>
                </block>
            </view>
            <view class="formCon">
                <u-form :model="form" ref="uForm" label-width="120">
                    <u-form-item label="计算方式" class="left-15">
                        <view class="itemBody rowH radioGroup flex">
                            <u-radio-group v-model="loanCalcType" placement="row" size="14" active-color="#007235" @change="changeLoanTypes">
                                <u-radio v-for="item in loanCalcTypes" :key="item.value" :name="item.value" :label="item.label"></u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>

                    <block v-if="loanCalcType === 'fang'">
                        <u-form-item label="房屋总价">
                            <view class="itemBody rowH flex">
                                <view class="bodyTxt col-3e">
                                    <input class="inp" type="digit" v-model="form.houseAmount" placeholder="请输入房屋总价" @input="changeAmount" @blur="changeAmount" />
                                </view>
                                <text>万</text>
                            </view>
                        </u-form-item>

                        <view class="formItem flex">
                            <view class="lableTit flex">首付金额</view>
                            <view class="itemBody rowH flex">
                                <view class="shoufu flex">
                                    <view class="bodyTxt">{{sy_shoufu?sy_shoufu:0}}</view>
                                    <text>万</text>
                                </view>
                                <view class="font10 noteWrap col-grey">便于整额贷款，首付会自动加上小数</view>
                            </view>
                        </view>
                        
                        <scroll-view scroll-x="true" class="scrollBili col-grey">
                            <block v-for="(num, index) in biliList" :key="index">
                                <view class="biliBtn font12 text-center right-10" :class="{'active': biliIndex == index}" @click="changeLoanRatio(index)">{{num}}</view>
                            </block>
                        </scroll-view>
                    </block>

                    <u-gap height="10" bg-color="#E7E7E7" v-if="calcType === 'zuhe' && loanCalcType === 'fang'"></u-gap>

                    <block v-if="calcType === 'zuhe' && loanCalcType === 'dai'">
                        <u-form-item label="贷款总额">
                            <view class="itemBody rowH flex">
                                <view class="bodyTxt col-3e">
                                    <input class="inp" type="digit" v-model="form.groupLoanAmount" placeholder="请输入金额" />
                                </view>
                                <text>万</text>
                            </view>
                        </u-form-item>
                    </block>

                    <u-form-item label="公积金贷款总额" v-if="calcType === 'gongjj' || calcType === 'zuhe'">
                        <view class="itemBody rowH flex">
                            <view class="bodyTxt col-3e">
                                <input class="inp" type="digit" v-model="form.loanAmountGJJ" placeholder="请输入公积金贷款金额" @blur="changeZuheGjjAmount" />
                            </view>
                            <text>万</text>
                        </view>
                    </u-form-item>

                    <u-form-item label="商贷总额" v-if="calcType === 'shangye' || calcType === 'zuhe'">
                        <view class="itemBody rowH flex">
                            <view class="bodyTxt col-3e">
                                <input class="inp" type="digit" v-model="form.loanAmountSY" placeholder="请输入商业贷款金额" @blur="changeZuheSyAmount" />
                            </view>
                            <text>万</text>
                        </view>
                    </u-form-item>

                    <view class="tipsWrap text-center col-theme bg-theme-opacity" v-if="calcType === 'zuhe'">公积金贷款</view>

                    <block v-if="calcType === 'gongjj' || calcType === 'zuhe'">
                        <view class="formItem border-bottom-grey flex" v-if="mortgageLength.length > 0">
                            <view class="lableTit flex">贷款年限</view>
                            <view class="itemBody rowH flex">
                                <picker mode="selector" :range="mortgageLength" range-key="label" :value="mortgageIndexGJJ" @change="mortgageChangeGJJ">
                                    <view class="flex">
                                        <text class="bodyTxt col-3e">{{mortgageLength[mortgageIndexGJJ].label}}</text>
                                        <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="formItem border-bottom-grey flex">
                            <view class="lableTit flex">公积金利率</view>

                            <view class="itemBody rowH flex" @click="showGjjLiLvSelect=true">
                                <text class="bodyTxt">{{ isCustomGjjLilv ? gongjjLilv + '%' : currGjjLiLvObj.value +'%'+ currGjjLiLvObj.label }}</text>
                                <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                            </view>
                        </view>
                    </block>

                    <view class="tipsWrap text-center col-theme bg-theme-opacity" v-if="calcType === 'zuhe'">商业贷款</view>

                    <block v-if="calcType === 'shangye' || calcType === 'zuhe'">
                        <view class="formItem border-bottom-grey flex" v-if="mortgageLength.length > 0">
                            <view class="lableTit flex">贷款年限</view>
                            <view class="itemBody rowH flex">
                                <picker mode="selector" :range="mortgageLength" range-key="label" :value="mortgageIndexSY" @change="mortgageChangeSY">
                                    <view class="flex">
                                        <text class="bodyTxt col-3e">{{mortgageLength[mortgageIndexSY].label}}</text>
                                        <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="formItem border-bottom-grey flex">
                            <view class="lableTit flex">利率方式</view>
                            <view class="itemBody rowH flex">
                                <text class="bodyTxt col-3e">按最新利率LPR利率</text>
                            </view>
                        </view>

                        <view class="formItem border-bottom-grey flex">
                            <view class="lableTit flex" @click="lprDisplay = true">
                                <text class="tit">LPR</text>
                                <u-icon name="question-circle" color="#2979ff" size="14"></u-icon>
                            </view>
                            <view class="itemBody rowH flex">
                                <text class="bodyTxt">{{ LPR }}</text>
                                %
                            </view>
                        </view>

                        <view class="formItem border-bottom-grey flex">
                            <view class="lableTit flex">
                                商贷利率
                            </view>
                            <view class="itemBody rowH flex" @click="showLiLvSelect=true">
                                <text class="bodyTxt">{{ isCustomShangLilv ? shangLiLv + '%' : shangLiLv + currLiLvObj.label}}</text>
                                <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                            </view>
                        </view>
                    </block>
                </u-form>
            </view>
            <view class="calcBtn font15 fontBold bg-theme col-fff" @click="submit">开始计算</view>
            <u-modal v-model="lprDisplay" :show-title="false" confirm-text="我知道了" confirm-color="#007235" :mask-close-able="true">
                <view class="lprCon font14">
                    <view class="lprItem">
                        <text class="font18 col-3e fontBold">什么是LPR?</text>
                        <view class="txt">
                            自2019年10月8日起，新发放商业性个人住房贷款利率以最近一个月相应期限的贷款市场报价利率（LPR）为定价基准加点形成。
                        </view>
                        <view class="txt">即：最新商贷利率=LPR+基点</view>
                    </view>
                </view>
            </u-modal>
            <!-- <u-modal v-model="jdDisplay" :show-title="false" confirm-text="我知道了" confirm-color="#007235" :mask-close-able="true">
                <view class="lprCon font14">
                    <view class="lprItem">
                        <text class="font18 col-3e fontBold">什么是基点?</text>
                        <view class="txt">
                            由贷款银行按照地区信贷政策要求和借款人综合情况确定的一个数值。
                        </view>
                        <view class="txt">即：最新商贷利率=LPR+基点</view>
                    </view>
                </view>
            </u-modal> -->

            <u-popup v-model:show="showLiLvSelect" mode="bottom">
                <view class="lilvSelectWrap">
                    <view class="topTitWrap flex">
                        <text class="col-grey" @click="showLiLvSelect = false">取消</text>
                        <tetx class="fontBold font13">商贷利率</tetx>
                        <text class="col-theme" @click="confirmLilvSelect">确定</text>
                    </view>
                    <picker-view v-if="liLvOptions.length > 0" :value="liLvValue" @change="changeLiLvSelect" class="pickerWrapLiLv text-center">
                        <picker-view-column>
                            <view class="item flex" v-for="(item,index) in liLvOptions" :key="index">
                                <text>{{(LPR + item.value).toFixed(2) + item.label}}</text>
                            </view>
                        </picker-view-column>
                    </picker-view>
                    <view class="customeWrap flex border-top-grey">
                        <text class="customeTit">自定义利率</text>
                        <view class="customeInpWrap flex">
                            <input class="inp text-right" type="digit" v-model="form.customLiLvShang" :cursor-spacing="20" placeholder="请输入利率" />
                            <text class="left-3 right-5">%</text>
                            <view class="btnWrap flex">
                                <button class="confirmCustomBtn clearBtn" v-if="form.customLiLvShang" @click="confirmCustomShang">确定</button>
                            </view>
                        </view>
                    </view>
                </view>
            </u-popup>

            <u-popup v-model:show="showGjjLiLvSelect" mode="bottom">
                <view class="lilvSelectWrap">
                    <view class="topTitWrap flex">
                        <text class="col-grey" @click="showGjjLiLvSelect = false">取消</text>
                        <tetx class="fontBold font13">公积金利率</tetx>
                        <text class="col-theme" @click="confirmGjjLilvSelect">确定</text>
                    </view>
                    <picker-view v-if="gongjjLiLvOptions.length > 0" :value="GjjliLvValue" @change="changeGjjLiLvSelect" class="pickerWrapLiLv text-center">
                        <picker-view-column>
                            <view class="item flex" v-for="(item,index) in gongjjLiLvOptions" :key="index">
                                <text>{{ item.value +'%'+ item.label }}</text>
                            </view>
                        </picker-view-column>
                    </picker-view>
                    <view class="customeWrap flex border-top-grey">
                        <text class="customeTit">自定义利率</text>
                        <view class="customeInpWrap flex">
                            <input class="inp text-right" type="digit" v-model="form.customLiLvGongjj" :cursor-spacing="20" placeholder="请输入利率" />
                            <text class="left-3 right-5">%</text>
                            <view class="btnWrap flex">
                                <button class="confirmCustomBtn clearBtn" v-if="form.customLiLvGongjj" @click="confirmCustomGjj">确定</button>
                            </view>
                        </view>
                    </view>
                </view>
            </u-popup>

            <share-btn v-if="!showLiLvSelect" :display="scrollAnimate"></share-btn>
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { truncateDecimals } from '@/common/utils/tax-tools';
    // import { dispatchClient } from '@/common/api-adviser';
    import { calculatorLoanRate } from '@/common/api/menus';
    import { isBoolean } from '@/common/common';
	export default {
		data() {
			return {
                loanCalcType: 'fang',
                loanCalcTypes: [{
                    label: '按贷款总额',
                    value: 'dai'
                },{
                    label: '按房屋总价',
                    value: 'fang'
                }],
                LPR: 3.95,
                maxLoanGjj: 0,
                showLiLvSelect: false,
                scrollLilvIndex: 3,
                liLvValue: [0],
                liLvOptions: [],
                isCustomShangLilv: false,
                isCustomGjjLilv: false,
                showGjjLiLvSelect: false,
                scrollGjjLilvI: 0,
                GjjliLvValue: [0],
				daiTypeList: [{
                    name: '商业贷款',
                    type: 'shangye'
                }, {
                    name: '公积金贷款',
                    type: 'gongjj'
                }, {
                    name: '组合贷款',
                    type: 'zuhe'
                }],
                calcType: 'shangye',
                biliIndex: 3,
                biliList: [],
                mortgageIndexSY: 0,
                mortgageIndexGJJ: 0,
                mortgageLength: [],
                gongjjLiLvOptions: [],
                lprDisplay: false,
                form: {
                    houseAmount: null,
                    groupLoanAmount: null,
                    loanAmountSY: null,
                    loanAmountGJJ: null,
                    customLiLvShang: null,
                    customLiLvGongjj: null
                },
                scrollAnimate: false,
                productId: '',
                title: '',
                share: false,
                start_time: 0,
            }
		},
        computed:{
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['scene']),
            
            //首付金额
            sy_shoufu: function() {
                if(!this.form.houseAmount) return 0;

                let amountSplit = this.form.houseAmount.split(".");
                let zhengshu = amountSplit[0];
                let xiaoshu = amountSplit[1] || 0;
                let num = parseInt(zhengshu*this.biliList[this.biliIndex]*0.1);
                return num+parseFloat(`0.${xiaoshu}`)
            },

            //组合贷款总额
            zuhe_amount_dai: function(){
                if(this.loanCalcType === 'fang') {
                    return this.form.houseAmount - this.sy_shoufu
                }
                if(this.loanCalcType === 'dai') {
                    return this.form.groupLoanAmount - this.sy_shoufu
                }
            },

            //当前选中的商贷利率obj
            currLiLvObj: function () {
                return this.liLvOptions.length > 0 ? this.liLvOptions[this.liLvValue[0]] : {}
            },

            //当前选中的公积金贷利率obj
            currGjjLiLvObj: function () {
                return this.gongjjLiLvOptions.length > 0 ? this.gongjjLiLvOptions[this.GjjliLvValue[0]] : {}
            },

            //根据是否自定义利率方式返回商业利率
            shangLiLv: function() {
                return this.isCustomShangLilv ? this.form.customLiLvShang : truncateDecimals((this.LPR + this.currLiLvObj.value), 5)
            },

            //根据是否自定义利率返回公积金利率
            gongjjLilv: function () {
                return this.isCustomGjjLilv ? this.form.customLiLvGongjj : this.currGjjLiLvObj.value
            }
        },

        onShareAppMessage(res) {
            return {
                title: `房贷计算器`,
                path: `/pages/tools/calculator/mortgage-calculate?productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=房贷计算器-${this.productId}-${this.title}`,
            }
        },
        
        onShareTimeline() {
            return {
                title: `房贷计算器`,
                query: `productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=房贷计算器-${this.productId}-${this.title}`
            }
        },
        
		onLoad(options) {
            const that = this;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            let { productId='', title='', puid='', share=false } = options;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            
            uni.$check_and_login(function () {
                that.init();
                //绑定客户
                // dispatchClient({
                //     share: that.share,
                //     puid: puid,
                //     pid: that.productId
                // });
            })
		},
        
        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            this.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },

		methods: {
            ...mapActions(useConfigStore, ['setPuid']),

            //初始化数据,贷款年限、首付比例、公积金利率
            init() {
                this.loanYearsFun();

                calculatorLoanRate().then(res => {
                    if(res.status === 0) {
                        let { LPR, accFundLoanLvOps, commLoanLvOps, loanRatioList, defLoanRatio, gjjMaxLoan, defGongLoanRatio, defShangLoanRatio } = res.detail;
                        console.log(res.detail)
                        this.LPR = Number(LPR);

                        this.maxLoanGjj = Number(gjjMaxLoan);

                        this.biliList = loanRatioList;

                        this.biliIndex = loanRatioList.findIndex(item => item === defLoanRatio);

                        let defGjjOptIndex = accFundLoanLvOps.findIndex(item => item.value === defGongLoanRatio);
                        let defShangOptIndex = commLoanLvOps.findIndex(item => item.value === defShangLoanRatio);

                        this.GjjliLvValue = defGjjOptIndex !== -1 ? [defGjjOptIndex] : [0];
                        this.liLvValue = defShangOptIndex !== -1 ? [defShangOptIndex] : [0];

                        commLoanLvOps.forEach(element => {
                            element.value = Number(element.value) === 0 ? 0 : Math.round(Number(element.value)*10)/1000
                        });
                        this.liLvOptions = commLoanLvOps;

                        accFundLoanLvOps.forEach(element => {
                            element.value = Number(element.value)
                        })
                        this.gongjjLiLvOptions = accFundLoanLvOps;
                    }else {
                        uni.$u.toast(res.detail)
                    }
                })
            },

            //处理贷款年限
            loanYearsFun() {
                let yearsArr = [];
                for(let i=30; i>0; i--) {
                    yearsArr.push({
                        label: `${i}年(${i*12})期`,
                        value: i*12
                    })
                }
                this.mortgageLength = yearsArr;
            },

            //输入房屋总价计算贷款总额
            changeAmount() {
                this.updateLoanAmount();
            },

            //切换首付比例
            changeLoanRatio(index) {
                this.biliIndex = index;
                this.updateLoanAmount();
            },

            //更新商贷和公积金贷款总额,房屋总价-首付金额
            updateLoanAmount() {
                if(this.calcType === 'shangye') {
                    this.form.loanAmountSY = truncateDecimals(this.form.houseAmount - this.sy_shoufu, 0);
                }
                if(this.calcType === 'gongjj') {
                    this.form.loanAmountGJJ = truncateDecimals(this.form.houseAmount - this.sy_shoufu, 0);
                }
            },

            //选择商贷LPR和基点返回下标
            changeLiLvSelect(e) {
                this.scrollLilvIndex = e.detail.value[0];
            },

            //选择公积金贷LPR和基点返回下标
            changeGjjLiLvSelect(e) {
                this.scrollGjjLilvI = e.detail.value[0];
            },

            //确认商贷利率下拉框
            confirmLilvSelect() {
                this.isCustomShangLilv = false;
                this.liLvValue = [this.scrollLilvIndex];
                this.showLiLvSelect = false;
            },

            //确认公积金贷款利率下拉框
            confirmGjjLilvSelect() {
                this.isCustomGjjLilv = false;
                this.GjjliLvValue = [this.scrollGjjLilvI];
                this.showGjjLiLvSelect = false;
            },

            //自定义商贷利率确认
            confirmCustomShang() {
                this.isCustomShangLilv = true;
                this.showLiLvSelect = false;
            },

            //自定义公积金贷利率确认
            confirmCustomGjj() {
                this.isCustomGjjLilv = true;
                this.showGjjLiLvSelect = false;
            },

            //切换贷款方式,重置表单数据
			changeDaiType(item) {
                this.calcType = item.type;
                this.resetForm();
            },

            //组合贷款内商贷金额改变，计算商贷总额和公积金贷款总额
            changeZuheSyAmount() {
                if(this.calcType !== 'zuhe') return;
                if(this.form.loanAmountSY >= this.zuhe_amount_dai) {
                    this.form.loanAmountSY = this.zuhe_amount_dai;
                }
                this.form.loanAmountGJJ = this.zuhe_amount_dai - this.form.loanAmountSY
            },

            //组合贷款内公积金贷款总额改变，计算商贷总额
            changeZuheGjjAmount() {
                if(this.calcType !== 'zuhe') return;
                if(this.form.loanAmountGJJ >= this.zuhe_amount_dai) {
                    this.form.loanAmountGJJ = this.zuhe_amount_dai;
                }
                this.form.loanAmountSY = this.zuhe_amount_dai - this.form.loanAmountGJJ
            },
            
            //提交开始计算
            submit() {
                let sy_months = 0, gjj_months = 0, sy_amount=0, sy_rate=0, gjj_amount=0, gjj_rate=0;
                //商业贷款
                if(this.calcType === 'shangye') {
                    sy_months = this.mortgageLength[this.mortgageIndexSY].value;
                    sy_rate = truncateDecimals(this.shangLiLv/100, 5);
                    sy_amount = Number(this.form.loanAmountSY)*10000;
                    if(!sy_amount) {
                        this.$common.msg('请填写贷款金额');
                        return
                    }
                    if(!sy_rate) {
                        this.$common.msg('请填写贷款利率');
                        return
                    }
                }

                //公积金贷款方式
                if(this.calcType === 'gongjj') {
                    if(Number(this.form.loanAmountGJJ) > this.maxLoanGjj) {
                        uni.$u.toast(`目前公积金最高可贷${this.maxLoanGjj}万`);
                        return
                    }
                    gjj_months = this.mortgageLength[this.mortgageIndexGJJ].value;
                    gjj_rate = truncateDecimals(this.gongjjLilv/100, 5);
                    gjj_amount = Number(this.form.loanAmountGJJ)*10000;

                    if(!gjj_amount) {
                        uni.$u.toast('请填写贷款金额');
                        return
                    }
                    if(!gjj_rate) {
                        uni.$u.toast('请填写贷款利率');
                        return
                    }
                }

                //组合贷款
                if(this.calcType === 'zuhe') {
                    if(this.loanCalcType === 'fang' && !this.form.houseAmount) {
                        uni.$u.toast('请输入房屋总价');
                        return
                    }

                    if(this.loanCalcType === 'dai' && !this.form.groupLoanAmount) {
                        uni.$u.toast('请输入贷款总额');
                        return
                    }

                    if(Number(this.form.loanAmountGJJ) > this.maxLoanGjj) {
                        uni.$u.toast(`目前公积金最高可贷${this.maxLoanGjj}万`);
                        return
                    }

                    sy_months = this.mortgageLength[this.mortgageIndexSY].value;
                    gjj_months = this.mortgageLength[this.mortgageIndexGJJ].value;
                    sy_rate = truncateDecimals(this.shangLiLv/100, 5);
                    gjj_rate = truncateDecimals(this.gongjjLilv/100, 5);
                    sy_amount = Number(this.form.loanAmountSY)*10000;
                    gjj_amount = Number(this.form.loanAmountGJJ)*10000;

                    if(sy_amount === 0 && gjj_amount === 0) {
                        uni.$u.toast('请输入贷款金额');
                        return
                    }

                    if(sy_rate === 0 || gjj_rate === 0) {
                        uni.$u.toast('贷款利率或公积金利率不能为0');
                        return
                    }
                }
                uni.navigateTo({
                    url: `/pages/tools/calculator/mortgage-calculate-result?sy_months=${sy_months}&gjj_months=${gjj_months}&sy_amount=${sy_amount}&gjj_amount=${gjj_amount}&sy_rate=${sy_rate}&gjj_rate=${gjj_rate}`
                })
            },

            //改变计算方式,重置表单数据
            changeLoanTypes(){
                this.resetForm();
            },

            //重置表单数据
            resetForm() {
                this.form.houseAmount = null;
                this.form.groupLoanAmount = null;
                this.form.loanAmountSY = null;
                this.form.loanAmountGJJ = null;
            },

            //改变商业贷款年限
            mortgageChangeSY(e) {
                this.mortgageIndexSY = e.detail.value
            },

            //改变公积金贷款年限
            mortgageChangeGJJ(e) {
                this.mortgageIndexGJJ = e.detail.value
            }
		}
	}
</script>

<style lang="scss" scoped>
    .rowH {
        height: 100rpx;
    }
	.calcPage{
		line-height: 1;
		min-height: 100vh;
        border-bottom: 1rpx solid #ffffff;
        .tabs{
            position: sticky;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 999;
            border-bottom: 1rpx solid rgba(0,0,0,.05);
            .tab{
                flex: 1;
                .txt{
                    height: 100rpx;
                    line-height: 100rpx;
                }
            }
            .active{
                font-size: 36rpx;
                font-weight: bold;
                .txt{
                    border-bottom: 4rpx solid $theme-color;
                }
            }
        }
        .formCon{
            .itemBody{
                max-width: 70vw;
                justify-content: flex-end;
                .bodyTxt{
                    margin-right: 20rpx;
                    justify-content: flex-end;
                    .inp{
                        text-align: right;
                    }
                }
            }
            .radioGroup{
                width: inherit;
            }
            .tipsWrap{
                height: 70rpx;
                line-height: 70rpx;
            }
            .formItem{
                height: 100rpx;
                padding: 0 28rpx;
                justify-content: space-between;
                position: relative;
                .lableTit{
                    justify-content: flex-start;
                    .tit{
                        margin-right: 20rpx;
                    }
                }
                .shoufu{
                    justify-content: flex-end;
                }
                .noteWrap{
                    position: absolute;
                    bottom: 0;
                    right: 28rpx;
                    z-index: 9;
                }
            }
            .scrollBili{
                height: 70rpx;
                padding: 28rpx 0rpx 20rpx 0rpx;
                white-space: nowrap;
                .biliBtn{
                    display: inline-block;
                    border: 1rpx solid rgba(0,0,0,.05);
                    border-radius: 6rpx;
                    width: 90rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    &:first-child{
                        margin-left: 28rpx;
                    }
                }
                .active{
                    border: 1rpx solid $theme-color;
                    color: $theme-color;
                }
            }
        }
        .calcBtn{
            text-align: center;
            height: 80rpx;
            line-height: 80rpx;
            margin: 100rpx 28rpx 50rpx 28rpx;
            border-radius: 40rpx;
        }
        .lprCon{
            padding: 50rpx 40rpx;
            .lprItem{
                margin-bottom: 30rpx;
                .txt{
                    line-height: 1.4;
                    margin-top: 30rpx;
                }
            }
        }
        .lilvSelectWrap{
            padding: 28rpx 28rpx 50rpx 28rpx;
            .topTitWrap{
                justify-content: space-between;
            }
            .pickerWrapLiLv{
                height: 30vh;
            }
            .customeWrap{
                padding-top: 28rpx;
                justify-content: space-between;
                .customeInpWrap{
                    .inp{
                        width: 40vw;
                    }
                    .btnWrap{
                        width: 100rpx;
                        .confirmCustomBtn{
                            width: 100%;
                            font-size: 26rpx;
                            padding: 6rpx 0;
                            color: $theme-color;
                            border-radius: 10rpx;
                            border: 2rpx solid $theme-color;
                        }
                    }
                }
            }
        }
	}
</style>
